<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息页面</title>
    <link href="../css/userManager.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div style="width: 100%;height:800px;position: center;background-color: white;padding-top: 20px;">
        <div style="border: 1px;background-color: #dddddd;height: 35px;padding-top: 10px;">
            <label class="div-label">登录名：</label><input class="div-input" type="text" id="userName" name="userName" placeholder="用户名">
            <label class="div-label">用户组：</label>
            <select style="width: 12%;box-sizing: border-box;border: solid 1px #ddd;height: 31px;" id="userGroup">
                <option value="" selected>请选择</option>
                <option value="1">管理组</option>
                <option value="2">用户组</option>
            </select>
            <button class="div-button" id="find" name="find" type="button" onclick="pageSkip(1)">搜索</button>
            <button class="div-button" id="empty" name="empty" type="button" onclick="empty()">清空</button>
        </div>
        <div style="border: 1px;background-color: #dddddd;margin-top: 10px;height: 35px;padding-top: 10px;">
            <span style="margin-left: 20px;"><a class="div-a" href="#" onclick="addUser()">添加用户</a></span>
            <span style="margin-left: 80%;">共有数据：<strong id="total"></strong> 条</span>
        </div>

        <table id="table" width="100%" class="div-table">
            <thead >
                <tr>
                    <th width="5%"><input name="" type="checkbox" value=""></th>
                    <th width="7%">ID</th>
                    <th width="7%">用户组</th>
                    <th width="10%">登录名</th>
                    <th width="8%">姓名</th>
                    <th width="10%">身份证</th>
                    <th width="8%">手机号</th>
                    <th width="10%">备注</th>
                    <th width="10%">操作</th>
                </tr>
            </thead>
            <tbody id="tuserList"></tbody>

        </table>
        <!--分页-->
        <div class="dataTables_info" id="dataTables_info">
            <span>共有 <strong id="totalPages"></strong> 页</span>
            <span>当前第 <strong id="now"></strong> 页</span>
        </div>
        <div class="dataTables_paginate" id="pager">
        </div>

    </div>

    <script type="text/javascript" src="../lib/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/H-ui.min.js"></script>
    <script type="text/javascript" src="../lib/util.js"></script>
    <script type="text/javascript">
        function empty(){
            $("#userName").val("");
            $("#userGroup option:first").prop("selected", 'selected');
        }

        //查询用户列表
        $(document).ready(function () {
            pageSkip(1);

        });

        //分页查询
        function pageSkip(index){
            $("#tuserList").empty();

            var userName = $("#userName").val();
           // var realname = $("#realname").val();
            var groupid = $("#userGroup").val();

            $.ajax({
                type: "post",
                url: "/user/selectByConditionWithPageInfo",
                data: {
                    username:userName,
                    groupid:groupid,
                    pageNum:index,
                    pageSize:10
                },
                dataType: "json",

                success: function (data) {

                    var status=data.status;
                    var msg=data.msg;
                    var list=data.data.list;
                    console.log(data);
                    var html = "";

                    if(status == 0){

                        $("#tuserList").html("");
                        var groups=userGroup();
                        var groupName="";

                        for(var i=0;i<list.length;i++){
                            var row = list[i];

                            for(var k=0;k<groups.length;k++){
                                var one=groups[k];
                                if(one.groupId == row.groupid){
                                    groupName=one.desc;
                                }
                            }

                            var remark=row.remark;
                            if(row.remark == null){
                                remark="";
                            }


                            var rowHtml = "<tr class=\"text-c\">\n" +
                                "<td><input name=\"\" type=\"checkbox\" value=\"\"></td>\n" +
                                "<td>"+row.id+"</td>\n" +
                                "<td>"+groupName+"</td>\n" +
                                "<td>"+row.username+"</td>\n" +
                                "<td >"+row.realname+"</td>\n" +
                                "<td>"+row.identity+"</td>\n" +
                                "<td >"+row.phone+"</td>\n" +
                                "<td>"+remark+"</td>\n" +
                                "<td ><a title=\"编辑\" href=\"javascript:;\" onclick=\"userEdit("+row.id+")\" style=\"text-decoration:none\">编辑</a> \n" +
                                "<a title=\"删除\" href=\"javascript:;\" onclick=\"userDel(this,"+row.id+")\" class=\"ml-5\" style=\"text-decoration:none\">删除</a></td>\n" +
                                "</tr>";
                            html = html + rowHtml;
                        }

                        $("#tuserList").append(html);
                        pagination(data);

                    }else{

                        alert(msg);
                    }
                },


            });


        }


        //点击添加用户处理
        function addUser() {

            window.open('userAdd.html','right');
            
        }

        //用户编辑提交
        function userEdit(id) {

            window.open('userEdit.html?id='+id,'right')

        }

        /*用户-删除*/
        function userDel(obj,id){
            var ms="用户删除需谨慎，请确认是否删除！";
            del(obj,id,"/user/deleteOne",ms);
        }


    </script>

</body>
</html>